<template>
    <div>
        <div class="flex align-items space-between pl-15">
            <div class="flex">
                <img src="../../assets/img/6.png" width="30px" height="30px" />
                <img src="../../assets/img/10.png" width="80px" height="30px" class="ml-10" />
            </div>
            <router-link :to="{ name: 'biaoxun' }" style="text-decoration: none;color:#ffffffb0">
                查看更多<i class="el-icon-arrow-right"></i>
            </router-link>
        </div>
        <div class="list">
            <router-link :to="{ name: 'biaoxunDetails', params: { id: item.id } }" class="flex item"
                v-for="(item, index) in list" :key="item.id">
                <div class="prefix">
                    <img v-if="index < 3" :src="require(`../../assets/img/hot${index + 1}.png`)" />
                    <template v-else>{{ index + 1 }}</template>
                </div>
                <div class="title text-hide">{{ item.title }}</div>
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
    name: 'hotBiaoxun',
    props: {
        list: {
            type: Array,
            default: () => []
        }
    },
    data () {
        return {

        }
    },
    mounted () {

    },
    methods: {
    },
}
</script>

<style scoped lang="less">
.list {
    padding-top: 30px;

    .item {
        padding: 13px 15px;
        text-decoration: none;

        &:hover {
            background: rgba(46, 48, 51, 0.1);
            border-radius: 5px;
        }
    }

    .prefix {
        width: 24px;
        height: 24px;
        color: #ffffffb0;
        text-align: center;

        img {
            display: block;
            width: 100%;
            height: 100%;
        }
    }


    .title {
        font-weight: normal;
        font-size: 16px;
        color: #ffffffb0;
        padding-left: 10px;
    }
}
</style>